<template>
   <div class="goods-tabs">
      <nav>
        <a href="javascript:;" :class="{active: activeName==='details'}" @click="change('details')">商品详情</a>
        <a href="javascript:;" :class="{active: activeName==='eavluate'}" @click="change('eavluate')">商品评价<span>({{count.commentCount}})</span></a>
      </nav>
         <!-- 切换内容的地方 -->
         <keep-alive>
     <component :is="activeName"></component>
         </keep-alive>
    </div>
</template>

<script>
import { inject, ref } from 'vue'
import eavluate from './goods-eavluate.vue'
import details from './goods-details.vue'
export default {
  components: {
    eavluate, details
  },
  name: 'goodsTabs',
  setup () {
    const count = inject('goods')
    const activeName = ref('details')
    const change = (ev) => {
      activeName.value = ev
    }
    return { activeName, change, count }
  }
}
</script>

<style scoped lang="less">
.goods-tabs{
nav{
    // position: relative;
    height: 70px;
    line-height: 70px;
    display: flex;
    border-bottom:1px solid #f5f5f5;
    a{
        position: relative;
        padding:0 40px;
        >span{
            color:@priceColor;
            font-size: 16px;
            margin-left: 10px;
        }
        &:first-child{
            border-right: 1px solid #f5f5f5;
        }
        &.active{
            &::before{
                content: "";
                position: absolute;
                left: 30px;
                bottom: -1px;
                width: 72px;
                height: 2px;
                background:@xtxColor;
            }
        }
    }
}
}
</style>
